<template>
	<div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      	<el-form-item label="输入科室编码:" prop="id">
      		<el-input v-model="formInline.idnumber" placeholder="请输入科室编码"></el-input>
      	</el-form-item>
      	<el-form-item>
      		<el-button type="primary" @click="getroom()">查询</el-button>
      	</el-form-item>
      	<el-form-item>
      		<el-button type="primary" @click="getallroom()">显示全部科室</el-button>
      	</el-form-item>
      	<el-form-item>
      		<el-button type="primary" @click="dialogFormVisible = true">添加科室</el-button>
      	</el-form-item>
      </el-form>	
		<el-divider></el-divider>
		<el-table :data="room" style="width: 100%">
			<el-table-column prop="id" label="科室编码" width="180">
			</el-table-column>
			<el-table-column prop="name" label="科室名称" width="180">
			</el-table-column>
			<el-table-column prop="kind" label="科室类别" width="180">
			</el-table-column>
			<el-table-column prop="contact" label="联系方式" width="180">
			</el-table-column>
			<el-table-column  label="操作" width="180">
				<template slot-scope="scope">
				<el-button type="primary" @click="deleteRow(scope.$index,room)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
          <el-dialog title="添加药品" :visible.sync="dialogFormVisible">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
			  <el-row class="arow">
			  <el-col class="add" :span="12" :offset="2">
			  	<el-form-item label="科室编码" prop="id" required="">
			  		<el-input v-model="ruleForm.id" style="width: 400px;"></el-input>
			  	</el-form-item>
			  </el-col>
			  </el-row>
			 <el-row class="arow">
			 <el-col class="add" :span="12" :offset="2">
			 	<el-form-item label="科室名称" prop="name" required="">
			 		<el-input v-model="ruleForm.name" style="width: 400px;"></el-input>
			 	</el-form-item>
			 </el-col>
			 </el-row>
			  <el-row class="arow">
			<el-col class="add" :span="12" :offset="2">
			 	<el-form-item label="科室类别" prop="kind" required="">
			 		<el-select v-model="ruleForm.kind" placeholder="请选择科室类别" style="width: 400px;">
			 			<el-option label="临床" value="临床"></el-option>
			 			<el-option label="医技" value="医技"></el-option>
						<el-option label="财务" value="财务"></el-option>
						<el-option label="行政" value="行政"></el-option>
						<el-option label="其他" value="其他"></el-option>
			 		</el-select>
			 	</el-form-item>
			 </el-col>
			 </el-row>
			 <el-row class="arow">
			 <el-col class="add" :span="12" :offset="2">
			 	<el-form-item label="联系方式" prop="contact" required="">
			 		<el-input v-model="ruleForm.contact" style="width: 400px;"></el-input>
			 	</el-form-item>
			 </el-col>
			 </el-row>
			</el-form>
			 <div slot="footer" class="dialog-footer">
		       <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
		       <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
		     </div>
		  </el-dialog>
	</div>
</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api'
	import {
		showMsgConfirm
	} from '@/utils/api'
	import {
		getRequest
	} from '@/utils/api'
	import {
		postRequest
	} from '@/utils/api'
	import {
		uploadFileRequest
	} from '@/utils/api'
	import {
		putRequest
	} from '@/utils/api'
	import {
		deleteRequest
	} from '@/utils/api'
	import {
		showConstants
	} from '@/utils/api'
	import {
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				ruleForm: {
					id: '',
					name: '',
					kind: '',
					contact: ''
				},
				rules:{	
				},
				formInline: {
					idnumber: '',
				            },
							room:[],
				dialogTableVisible: false,
				        dialogFormVisible: false,
				        form: {
				          name: '',
				          region: '',
				          date1: '',
				          date2: '',
				          delivery: false,
				          type: [],
				          resource: '',
				          desc: ''
				        },
				        formLabelWidth: '120px'
			}
		},
		methods: {
			getallroom() {
				this.$axios.get('http://localhost:8081/allroom').then((result) => {
					console.log(result.data);
					this.room = result.data
				}).catch((err) => {
					console.log(error);
				});
			},
			getroom()
			{
				//postRequest('/idregister?idnumber='+this.formInline.idnumber);
				this.$axios.get('http://localhost:8081/queryroom?id='+this.formInline.idnumber).then((result) => {
						console.log(result.data);
						this.room = result.data
					}).catch((err) => {
						console.log(error);
					});
			},
			submitForm(formName) {
								 postRequest('/addroom',this.ruleForm);
			  this.$refs[formName].validate((valid) => {
			    if (valid) {
			      alert('成功!');
			    } else {
			      console.log('error submit!!');
			      return false;
			    }
			  });
			},
			deleteRow(index,rows){
				console.log(this.room[index].id);
				postRequest('/delroom?id='+this.room[index].id);
				rows.splice(index,1);
			}
		},
	}
</script>

<style>
.arow {
		margin-bottom: 20px;
		background-color: #FFFFFF;
		background: #FFFFFF;
	}
	.add.el-col{
		background-color: #FFFFFF;
	}

</style>
